<template>
	<view class="workbench-container">
		<view class="workbench-top-container">
			<view class="user-info-wrap">
				<view class="base-info">
					<view>Hi~</view>
					<view>管理员_印启发</view>
				</view>
				<image class="user-avatar" src="../../static/index/member.png"></image>
			</view>
			<view class="store-info-card">
				<view class="store-info-wrap">
					<view class="store-name">{{ storeInfo.name }}</view>
					<view class="store-status" :class="storeInfo.color">{{ storeInfo.status }}</view>
				</view>
				<view class="store-function-wrap">
					<uni-grid class="store-function-grid" :column="5" :showBorder="false" :square="false">
						<uni-grid-item class="fun-gird-item" v-for="(fun, index) in functionList" :index="index" :key="index">
							<view class="fun-item">
								<image class="fun-item-icon" :src="fun.icon" mode=""></image>
								<text class="title-text">{{ fun.name }}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
		</view>
		<view class="main-content">
			<!-- 常用模块 -->
			<view class="frequent-module">
				<view class="uni-title title-prefix">常用模块</view>
				<uni-grid :column="3" :showBorder="false" :square="false">
					<uni-grid-item class="module-gird-item" v-for="(module, index) in moduleList" :index="index" :key="index">
						<view class="module-item">
							<text class="module-name">{{ module.name }}</text>
							<image class="module-icon" :src="module.icon" mode=""></image>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<!-- 功能模块 -->
			<view class="function-module">
				<view class="uni-title title-prefix function-module-title">
					<view>功能模块</view>
					<view class="more-wrap">
						更多
						<uni-icons type="forward" size="17" color="#898A8C"></uni-icons>
					</view>
				</view>

				<uni-grid :column="2" :showBorder="false" :square="false">
					<uni-grid-item class="fun-gird-item" v-for="(fun, index) in functionModuleList" :index="index" :key="index">
						<view class="fun-item">
							<view class="fun-item-title">{{ fun.name }}</view>
							<view class="fun-item-data" v-show="fun.data">{{ fun.data }}</view>
							<view class="fun-item-status">
								<text class="status-text" :class="fun.color">{{ fun.status }}</text>
								<image class="fun-module-item-icon" :src="fun.icon" mode=""></image>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</view>
</template>

<script>
	import commonUtils from '@/common/util/common.js'
	export default {
		data() {
			return {
				storeInfo: {
					name: 'AG电竞馆',
					status: '审核通过',
					color: 'success'
				},
				functionList: [{
						name: '基础信息',
						icon: require('../../static/workbench/info.png'),
						path: ''
					},
					{
						name: '基础照片',
						icon: require('../../static/workbench/img.png'),
						path: ''
					},
					{
						name: '消防设施',
						icon: require('../../static/workbench/fire-protection.png'),
						path: ''
					},
					{
						name: '切换店铺',
						icon: require('../../static/workbench/store.png'),
						path: ''
					},
					{
						name: '更多操作',
						icon: require('../../static/workbench/function.png'),
						path: ''
					}
				],
				moduleList: [{
						name: '日巡查',
						icon: require('../../static/workbench/edit.png')
					},
					{
						name: '周巡查',
						icon: require('../../static/workbench/edit.png')
					},
					{
						name: '月巡查',
						icon: require('../../static/workbench/edit.png')
					}
				],
				functionModuleList: [{
						name: '巡查历史',
						status: '暂无统计数据',
						icon: require('../../static/workbench/clock.png')
					},
					{
						name: '日巡查',
						status: '今日已提交',
						icon: require('../../static/workbench/day.png')
					},
					{
						name: '周巡查',
						status: '本周未提交',
						icon: require('../../static/workbench/week.png'),
						color: 'shutdown'
					},
					{
						name: '月巡查',
						status: '本月已提交',
						icon: require('../../static/workbench/month.png')
					},
					{
						name: '监管整改',
						status: '待整改次数',
						data: '0次',
						icon: require('../../static/workbench/regulatory.png')
					},
					{
						name: '消防安全',
						status: '暂无更多信息',
						icon: require('../../static/workbench/fire-protection-selected.png')
					},
					{
						name: '安全设备数量',
						data: '4台',
						status: '上报次数',
						icon: require('../../static/workbench/safe.png')
					},
					{
						name: '月度培训',
						data: '1次',
						status: '完成次数',
						icon: require('../../static/workbench/train.png')
					}
				]
			};
		},
		onLoad() {
			commonUtils.loadFont()
		},
		methods: {}
	};
</script>

<style scoped lang="scss">
	.workbench-container {
		font-family: 'PingFangSc';

		.workbench-top-container {
			height: 391upx;
			background: url('../../static/workbench/top-bg.png') center 100%;
			background-size: cover;

			.user-info-wrap {
				display: flex;
				padding: 32upx 60upx 45upx 45upx;
				color: #fff;

				.base-info {
					flex: 1;
					height: 116upx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.user-avatar {
					width: 116upx;
					height: 116upx;
					border: 1px solid rgb(255, 255, 255);
					border-radius: 16upx;
				}
			}

			.store-info-card {
				margin: 0 24upx;
				padding: 30upx 0;
				width: calc(100% - 48upx);
				background: url('../../static/workbench/store-card-bg.png') center 100%;
				background-size: cover;
				border: 1px solid rgb(255, 255, 255);
				border-radius: 8upx;

				.store-info-wrap {
					padding: 0 25upx;
				}

				.store-function-wrap {
					margin: 16upx 16upx 0;
					width: calc(100% - 32upx);
					background-color: #fff;
					border-radius: 4upx;

					.store-function-grid {
						margin: 40upx;
					}

					.fun-item {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.fun-item-icon {
							width: 48upx;
							height: 48upx;
						}

						.title-text {
							color: rgb(90, 94, 97);
							font-size: 22upx;
							text-align: center;
						}
					}
				}
			}
		}

		.main-content {
			padding: 150upx 24upx 0;

			.frequent-module {
				.module-gird-item {
					margin-top: 30upx;

					&:not(:last-child) {
						.module-item {
							margin-right: 20upx;
						}
					}
				}

				.module-item {
					display: flex;
					align-items: center;
					background: rgb(255, 255, 255);
					border: 1px solid rgb(235, 235, 235);
					border-radius: 8upx;
					padding: 30upx 24upx;

					.module-name {
						color: rgb(20, 20, 22);
						font-size: 28upx;
						flex: 1;
					}

					.module-icon {
						width: 24.41upx;
						height: 27.32upx;
					}
				}
			}

			.function-module {
				.function-module-title {
					display: flex;
					margin: 50upx 0 24upx;

					.more-wrap {
						display: flex;
						align-items: center;
						flex: 1;
						justify-content: flex-end;
						color: #898a8c;
						font-size: 26upx;
					}
				}

				.fun-item-title {
					font-size: 32upx;
				}

				.fun-item-data {
					font-size: 30upx;
				}

				.fun-gird-item:nth-child(odd) {
					.fun-item {
						margin-right: 13upx;
					}
				}

				.fun-gird-item:nth-child(even) {
					.fun-item {
						margin-left: 13upx;
					}
				}

				.fun-item {
					border: 1px solid rgb(235, 235, 235);
					border-radius: 8upx;
					padding: 20upx;
					display: flex;
					flex-direction: column;
					height: 184upx;
					justify-content: space-between;
					margin-bottom: 30upx;

					.fun-item-status {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 26upx;
						color: #7e7e7e;

						.fun-module-item-icon {
							width: 58upx;
							height: 58upx;
						}
					}
				}
			}
		}
	}
</style>
